<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>list.html</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        ul {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        a {
            text-decoration: none;
        }

        h4, p {
            font-size: 14px;
            color: #0b2e13;
        }

        p {
            color: #e11818;
        }

        li {
            padding: 4px;
            border: 1px solid #e8e8e8;
        }

        li, a {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        button {
            border: none;
            padding: 10px 0;
            background: #d51b1b;
            color: white;
            box-shadow: 0 0 3px 1px #881d1d;
            cursor: pointer;
        }

        button:hover {
            box-shadow: none;
        }

        button:active {
            box-shadow: 0 0 5px 2px #881d1d inset;
        }

        .commodity {
            width: max-content;
            max-width: 80%;
            margin: 10px auto 0;
        }
    </style>
</head>
<body>
<div id="root">

    <div class="commodity">
        <ul>
            <li v-for="(List, index) in cartData" :key="List.id">
                <a href="" @click.prevent="getPPage(List)">
                    <img :src="List.src" alt="">
                    <h4>{{ List.name }}</h4>
                    <p>￥{{ List.price }}</p>
                </a>
                <button @click="addCart(List)">点击添加购物车</button>
            </li>
        </ul>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#root",
        data() {
            return {
                cartData: [
                    {id: 10001, src: './images/1.jpg', name: '荣耀笔记本', price: '2999.00'},
                    {id: 10002, src: './images/2.jpg', name: '樱本笔记本', price: '3999.00'},
                    {id: 10003, src: './images/3.png', name: 'HAEWI笔记本', price: '1099.00'},
                ]
            }
        },
        methods: {
            addCart(list) {
                const id = list.id
                let commodity = []
                if (!localStorage.getItem('commodity')) {
                    commodity.push(list)
                    localStorage.setItem('commodity', JSON.stringify(commodity))
                } else {
                    commodity = JSON.parse(localStorage.getItem('commodity'))
                    console.log(commodity, id, this.pFind(commodity, id))
                    if (this.pFind(commodity, id) === false) {
                        commodity.push(list)
                        localStorage.setItem('commodity', JSON.stringify(commodity))
                    }
                }


                let p = []
                if (!localStorage.getItem('p')) {
                    p.push({id: id, number: 1})
                } else {
                    p = JSON.parse(localStorage.getItem('p'))
                    if (this.pFind(p, id) !== false) {
                        p[this.pFind(p, id)].number++
                    } else {
                        p.push({id: id, number: 1})
                    }
                }
                localStorage.setItem('p', JSON.stringify(p))
                location.href = 'cart.html'
            },
            pFind(pArr, id) {
                let bool = false
                pArr.forEach((e, index) => {
                    if (e.id === id) bool = index;
                })
                return bool
            },
            getPPage(p) {
                sessionStorage.setItem('thisP', JSON.stringify(p))
                location.href = 'detail.html'
            }
        },
        mounted() {

        }
    })
</script>

</body>
</html>